<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
const props = defineProps({
  content: {
    type: String
  },
  duration: {
    type: Number
  },
  destory: {
    type: Function
  }
})
const isVisable = ref(false)
onMounted(() => {
  isVisable.value = true
  setTimeout(() => {
    isVisable.value = false
  }, props.duration)
})
</script>
<template>
  <transition name="up" @after-leave="destory">
    <div
      v-if="isVisable"
      class="container flex bg-red-300 fixed top-8 left-1/2 -translate-x-1/2 w-36 h-10 items-center"
    >
      <SvgIcon name="success" class="w-10 mr-2" />
      <p>{{ content }}</p>
    </div>
  </transition>
</template>
<style>
.up-enter-active,
.up-leave-active {
  transition: all 0.3s ease;
}
.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
